<template>
  <div class="project-manage-page pd16" v-loading="pageLoading">
    <el-card class="box-card">
      <div class="btn-group">
        <el-button type="primary" @click="addProject">新增项目</el-button>
      </div>

      <div ref="tableBlockRef" class="data-block mt16 table-block">
        <el-table
          :data="tableData"
          class="nr-table"
          row-key="pid"
          :tree-props="defaultProps"
          :max-height="tableHeight"
          default-expand-all>
          <el-table-column prop="projectName" label="项目树"/>
          <el-table-column prop="projectOrder" label="排序号"/>
          <el-table-column prop="projectAddr" label="项目地址"/>
          <el-table-column prop="agencyName" label="代理商"/>
          <el-table-column prop="customerName" label="客户名称"/>
          <el-table-column label="操作">
            <template #default="scope">
              <el-link class="table-btn" type="primary" :underline="false" @click="addProject(scope.row)">下级</el-link>
              <el-link class="table-btn" type="primary" :underline="false" @click="handleEdit(scope.row)">编辑</el-link>
              <el-link class="table-btn" type="danger" :underline="false" @click="handleDelete(scope.row)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <project-modify-form
      :dialogVisible="modifyFormVis"
      :formStatus="modifyFormStatus"
      :formData="projectFormData.data"
      @update:dialogVisible="(value: boolean) => modifyFormVis = value"
      @submit="getProjectData">
    </project-modify-form>
  </div>
</template>

<script setup lang="ts" name="ProjectManage">
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import ProjectModifyForm from './project-modify-form.vue'
import { projectList, projectDelete } from '@/api/project-manage'

const pageLoading = ref(false)
const defaultProps = {
  children: 'projectTree',
}
const tableData = ref<any>([])
const tableBlockRef = ref<any>(null)
const tableHeight = ref(200)
const modifyFormVis = ref(false)
const modifyFormStatus = ref(0)
const projectFormData = ref({
  data: {}
})

onMounted(() => {
  resizeTable()
  window.addEventListener('resize', resizeTable, false)
  getProjectData() 
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeTable, false)
})

// 窗口改变table高度
const resizeTable = () => {
  tableHeight.value = tableBlockRef.value.offsetHeight
}

// 查询
const search = () => {
  getProjectData()
}

// 新增
const addProject = (row: any) => {
  modifyFormVis.value = true
  modifyFormStatus.value = 0
  if (row) projectFormData.value.data = Object.assign({}, row)
}

// 编辑
const handleEdit = (row: any) => {
  modifyFormVis.value = true
  modifyFormStatus.value = 1
  projectFormData.value.data = Object.assign({}, row)
}

// 删除
const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    `确定要删除【${row.projectName}】此项目吗？`,
    '系统提示',
    {
      type: 'warning',
    }
  )
  .then(() => {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
    let params = {
      pid: row.pid
    }
    projectDelete(params).then((res: any) => {
      if (res.code === 0) {
        ElMessage.success(`删除成功！`)
        getProjectData()
      } else {
        ElMessage.error(`${res.msg}`)
      }
    }).catch(err => {
      console.log(err)
    })
  })
  .catch(() => {})
}

// 获取项目树表格数据
const getProjectData = async () => {
  pageLoading.value = true
  await projectList().then((res: any) => {
    if (res.code === 0) {
      tableData.value = [...res.data.projectTree]
    } else {
      ElMessage.error(`${res.msg}`)
    }
  }).catch(err => {
    console.log(err)
  })
  pageLoading.value = false
}
</script>

<style lang="stylus" scoped>
@import '../../style/base.styl'

.project-manage-page
  height 100%
  .box-card
    height 100%
    &:deep(.el-card__body)
      height 100%
      position relative
      box-sizing border-box
  .table-block
    top 52px
    bottom 16px
</style>
